<template>
  <div class="page">
    <search-header @tap="clickSearchHeader" bgc="#42db55"></search-header>
    <section v-for="(group, groupIndex) in groups" :key="groupIndex">
      <header>
        <span class="text">{{ group.name }}</span>
        <div class="more">
          <span>更多</span>
          <i class="material-icons">keyboard_arrow_right</i>
        </div>
      </header>
      <scroll-view :scroll-x="true" class="list">
        <div class="item" hover-class="hover" hover-start-time="0" hover-stay-time="0" v-for="(item, itemIndex) in group.list" :key="itemIndex">
          <image mode="aspectFit" class="image" :src="item.src" />
          <span class="title">{{ item.name }}</span>
          <stars-bar class="stars-bar" :value="item.star"></stars-bar>
        </div>
      </scroll-view>
    </section>
  </div>
</template>

<script>
import searchHeader from '@/components/searchHeader'
import starsBar from '@/components/starsBar'
export default {
  components: { searchHeader, starsBar },
  data () {
    return {
      name: 'spraylee',
      groups: []
    }
  },
  onShow () {
    // this.groups = []
    wx.showLoading({ title: '加载中...' })
    setTimeout(() => {
      this.groups = [
        { name: '近期上映', list: [
          { name: '环太平洋', src: 'http://lijun.im/icon', star: 5.8 },
          { name: '环太平洋', src: 'http://lijun.im/icon', star: 5.8 },
          { name: '环太平洋', src: 'http://lijun.im/icon', star: 5.8 },
          { name: '环太平洋', src: 'http://lijun.im/icon', star: 5.8 },
          { name: '环太平洋', src: 'http://lijun.im/icon', star: 5.8 },
          { name: '环太平洋', src: 'http://lijun.im/icon', star: 5.8 },
        ]},
        { name: '近期上映2', list: [
          { name: '环太平洋', src: 'http://lijun.im/icon', star: 5.8 },
          { name: '环太平洋', src: 'http://lijun.im/icon', star: 5.8 },
          { name: '环太平洋', src: 'http://lijun.im/icon', star: 5.8 },
          { name: '环太平洋', src: 'http://lijun.im/icon', star: 5.8 },
          { name: '环太平洋', src: 'http://lijun.im/icon', star: 5.8 },
          { name: '环太平洋', src: 'http://lijun.im/icon', star: 5.8 },
        ]},
        { name: '近期上映2', list: [
          { name: '环太平洋', src: 'http://lijun.im/icon', star: 5.8 },
          { name: '环太平洋', src: 'http://lijun.im/icon', star: 5.8 },
          { name: '环太平洋', src: 'http://lijun.im/icon', star: 5.8 },
          { name: '环太平洋', src: 'http://lijun.im/icon', star: 5.8 },
          { name: '环太平洋', src: 'http://lijun.im/icon', star: 5.8 },
          { name: '环太平洋', src: 'http://lijun.im/icon', star: 5.8 },
        ]},
        { name: '近期上映2', list: [
          { name: '环太平洋', src: 'http://lijun.im/icon', star: 5.8 },
          { name: '环太平洋', src: 'http://lijun.im/icon', star: 5.8 },
          { name: '环太平洋', src: 'http://lijun.im/icon', star: 5.8 },
          { name: '环太平洋', src: 'http://lijun.im/icon', star: 5.8 },
          { name: '环太平洋', src: 'http://lijun.im/icon', star: 5.8 },
          { name: '环太平洋', src: 'http://lijun.im/icon', star: 5.8 },
        ]},
      ]
      wx.hideLoading()
    }, 1000)
  },
  onHide () {
    // this.groups = []
  },
  methods: {
    async getData () {
      
    },
    clickSearchHeader () {
      wx.redirectTo({
        url: '/pages/user/main'
      })
    }
  }
}
</script>

<style scoped>
.page {
  display: flex;
  align-items: stretch;
  flex-direction: column;
}
section {
  margin-bottom: 28rpx;
  background-color: #fff;
}
section header {
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  margin: 30rpx 0;
  border-left: 10rpx solid #42db55;
}
section header .text {
  margin-right: auto;
}
section header .more {
  font-size: 30rpx;
  display: flex;
  align-items: center;
  color: #42db55;
}
.list {
  white-space: nowrap;
}
.item {
  display: inline-flex;
  flex-direction: column;
  width: 220rpx;
  align-items: flex-start;
  padding: 20rpx;
}
.image {
  /* width: 200rpx; */
  width: 100%;
  height: 250rpx;
  flex: auto;
  min-width: 0;
}
.title {
  font-size: 28rpx;
}
.stars-bar {
  border: 1px solid red;
  width: 200rpx;
}

.hover {
  background-color: rgba(0, 0, 0, 0.15);
}
</style>

